<template>
  <view>
    <u-navbar
      v-if="!$isWeixin()"
      back-icon-color="#ffffff"
      :background="background"
      title-color="#ffffff"
      title="审核进度"
    ></u-navbar>

    <view style="padding: 30rpx 40rpx;">
      <u-time-line>
        <u-time-line-item nodeTop="75" v-for="(item, index) in timelineList" :key="index">
          <!-- 此处自定义了左边内容，用一个图标替代 -->
          <template v-slot:node>
            <view class="u-node">
              <!-- 此处为uView的icon组件 -->
              <u-icon name="clock" color="#76D3AB" :size="40"></u-icon>
            </view>
          </template>
          <template v-slot:content>
            <view class="u-flex u-col-center item-content" style="width: 100%;">
              <text class="state" :style="{ color: item.FontColor }">{{ item.StateName }}</text>
              <view class="u-m-l-20 u-flex-1">
                <view class="u-flex u-row-between">
                  <view>
                    <text class="name">{{ item.ManagerName }}</text>
                    <text class="post">{{ item.MH_Name }}</text>
                  </view>

                  <u-tag v-if="showHoldTag(item)" text="挂起" mode="dark" type="error" size="mini"></u-tag>
                </view>
                <text class="time">{{ (item.Created * 1000) | date('yyyy-mm-dd hh:MM:ss') }}</text>
                <view class="" style="width: 100%;">
                  <u-input
                    :value="item.Remark"
                    type="textarea"
                    style="width: 100%;"
                    :disabled="true"
                    autoHeight
                    :height="40"
                    :customStyle="{
                      background: '#EEEEEE',
                      borderRadius: '12rpx',
                      padding: '10rpx 15rpx',
                      color: '#A3A3A3'
                    }"
                  />
                </view>
              </view>
            </view>
          </template>
        </u-time-line-item>
      </u-time-line>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        backgroundColor: '#F19F41'
      },

      Id: '',
      ObjectId: '',

      timelineList: [],

      AuditRecords_BlockList: []
    };
  },

  onLoad(options) {
    if (options.id) {
      this.Id = options.id;
    }
    if (options.ObjectId) {
      this.ObjectId = options.ObjectId;
    }

    uni.setNavigationBarTitle({
      title: '审核进度'
    });

    this.getData();
  },

  methods: {
    showHoldTag(item) {
      const index = this.AuditRecords_BlockList.findIndex(r => item.ManagerId == r.ManagerId);

      return index > -1;
    },

    getData() {
      this.$u.api
        .getProgressInfo({
          Id: this.Id,
          ObjectId: this.ObjectId
        })
        .then(res => {
          console.log(res);
          const { ResultCode, AuditInfoList, AuditRecords_BlockList } = res;

          if (ResultCode == 1) {
            this.timelineList = AuditInfoList;

            if (AuditRecords_BlockList) {
              this.AuditRecords_BlockList = AuditRecords_BlockList;
            }
          }
        });
    }
  }
};
</script>

<style>
page {
  background-color: #fafafa;
}
</style>

<style lang="scss">
.item-content {
  border-radius: 12rpx;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
}

.time {
  display: inline-block;
  margin: 10rpx 0;
  color: #d1d1d1;
  font-size: 26rpx;
}

.state {
  display: inline-block;
  width: 120rpx;
}

.name {
  margin-right: 20rpx;
  color: #858585;
}

.post {
  color: #858585;
}
</style>
